<template>
  <el-card>
    <el-form ref="form" :model="form" :rules="rules" label-width="100px">
      <el-tabs v-model="activeName">
        <el-tab-pane label="基本信息" name="columnInfo">
          <el-row>
            <el-col :span="6">
              <el-form-item label="是否上架" prop="marketEnable">
                <el-radio-group v-model="form.marketEnable">
                  <el-radio v-for="dict in dict.type.goods_market_enable" :key="dict.value"
                    :label="dict.value">{{dict.label}}</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="商品名称" prop="goodsName">
                <el-input v-model="form.goodsName" placeholder="请输入商品名称" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="商品分类" prop="categoryName[1]">
                <treeselect v-model="form.categoryName[1]" :options="categoryList"
                  :disable-branch-nodes="true" :show-count="true" @select="changeCategoryPath"
                  placeholder="请选择商品分类" />
              </el-form-item>
            </el-col>

            <el-col :span="6">
              <el-form-item label="商品条码" prop="barCode">
                <el-input v-model="form.barCode" placeholder="请输入商品条码" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="药品编号" prop="identifier">
                <el-input v-model="form.identifier" placeholder="请输入商品编号" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="商品采购价" prop="cost">
                <el-input-number v-model="form.cost" controls-position="right" :min="0" />
              </el-form-item>
            </el-col>

            <el-col :span="6">
              <el-form-item label="商品零售价" prop="price">
                <el-input-number v-model="form.price" controls-position="right" :min="0" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="积分兑换" prop="point">
                <el-input-number v-model="form.point" controls-position="right" :min="0" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="商品库存" prop="quantity">
                <el-input-number v-model="form.quantity" controls-position="right" :min="0" />
              </el-form-item>
            </el-col>

            <el-col :span="6">
              <el-form-item label="商品重量(g)" prop="weight">
                <el-input-number v-model="form.weight" controls-position="right" :min="0" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="商品包装体积" prop="volume">
                <el-input-number v-model="form.volume" controls-position="right" :min="0" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="商品关键字" prop="key">
                <el-input v-model="form.key" placeholder="请输入商品关键字" />
              </el-form-item>
            </el-col>

            <el-col :span="6">
              <el-form-item label="助记码" prop="mnemonicCode">
                <el-input v-model="form.mnemonicCode" placeholder="请输入助记码" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="商品品牌" prop="brandId">
                <el-input v-model="form.brandId" placeholder="请输入助记码" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="经营范围品类" prop="classificationId">
                <el-input v-model="form.classificationId" placeholder="请输入助记码" />
              </el-form-item>
            </el-col>

            <el-col :span="6">
              <el-form-item label="最低销售价" prop="minPrice">
                <el-input-number v-model="form.minPrice" controls-position="right" :min="0" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="分单标识" prop="characteristic">
                <el-input v-model="form.characteristic" placeholder="请输入分单标识" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="中包装" prop="minPrice">
                <el-input-number v-model="form.minPrice" controls-position="right" :min="0" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-tab-pane>
      </el-tabs>
      <el-tabs v-model="activeName">
        <el-tab-pane label="属性" name="columnInfo">
          <el-row>
            <el-col :span="6">
              <el-form-item label="GMP认证" prop="gmp">
                <el-input v-model="form.extension.gmp" placeholder="请输入GMP认证" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="批准文号" prop="approvalNo">
                <el-input v-model="form.extension.approvalNo" placeholder="请输入批准文号" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="有效期" prop="expiryDate">
                <el-input v-model="form.extension.expiryDate" placeholder="请输入有效期" />
              </el-form-item>
            </el-col>

            <el-col :span="6">
              <el-form-item label="药品本位码" prop="standardCode">
                <el-input v-model="form.extension.standardCode" placeholder="请输入药品本位码" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="生产厂家" prop="manufacturer">
                <el-input v-model="form.extension.manufacturer" placeholder="请输入生产厂家" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="生产产地" prop="place">
                <el-input v-model="form.extension.place" placeholder="请输入生产产地" />
              </el-form-item>
            </el-col>

            <el-col :span="6">
              <el-form-item label="产品规格" prop="specs">
                <el-input v-model="form.extension.specs" placeholder="请输入产品规格" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="剂型" prop="dosageForm">
                <el-input v-model="form.extension.dosageForm" placeholder="请输入剂型" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="产品单位" prop="goodsUnit">
                <el-input v-model="form.extension.goodsUnit" placeholder="请输入产品单位" />
              </el-form-item>
            </el-col>

            <el-col :span="6">
              <el-form-item label="产品药属性" prop="prescriptionDrugType">
                <el-input v-model="form.extension.prescriptionDrugType" placeholder="" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="禁忌" prop="taboo">
                <el-input v-model="form.extension.taboo" placeholder="请输入禁忌" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="性状" prop="character">
                <el-input v-model="form.extension.character" placeholder="请输入性状" />
              </el-form-item>
            </el-col>

            <el-col :span="6">
              <el-form-item label="储藏方式" prop="storageMethod">
                <el-input v-model="form.extension.storageMethod" placeholder="请输入储藏方式" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="适用人群" prop="intendedFor">
                <el-input v-model="form.extension.intendedFor" placeholder="" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="医保类型" prop="medicalInsuranceType">
                <el-input v-model="form.extension.medicalInsuranceType" placeholder="请输入医保类型" />
              </el-form-item>
            </el-col>

            <el-col :span="6">
              <el-form-item label="商品简介" prop="introduction">
                <el-input v-model="form.extension.introduction" type="textarea"
                  placeholder="请输入商品简介"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="功能主治" prop="indications">
                <el-input v-model="form.extension.indications" type="textarea"
                  placeholder="请输入功能主治"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="注意事项" prop="note">
                <el-input v-model="form.extension.note" type="textarea" placeholder="请输入注意事项">
                </el-input>
              </el-form-item>
            </el-col>

            <el-col :span="6">
              <el-form-item label="不良反应" prop="adverseReactions">
                <el-input v-model="form.extension.adverseReactions" type="textarea"
                  placeholder="请输入不良反应"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="药物相互作用" prop="interaction">
                <el-input v-model="form.extension.interaction" type="textarea"
                  placeholder="请输入药物相互作用"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="成分" prop="component">
                <el-input v-model="form.extension.component" type="textarea" placeholder="请输入成分">
                </el-input>
              </el-form-item>
            </el-col>

            <el-col :span="6">
              <el-form-item label="用法用量" prop="usage">
                <el-input v-model="form.extension.usage" type="textarea" placeholder="请输入用法用量">
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-tab-pane>
      </el-tabs>
      <el-tabs v-model="activeName">
        <el-tab-pane label="商品图片JPG格式上传（尺寸建议350*350）" name="columnInfo">
          <el-row>
            <el-col :span="6">
              <el-form-item label="商品主图" prop="original">
                <el-upload class="avatar-uploader" :action="uploadImgUrl" :headers="headers"
                  :show-file-list="false" :on-success="handleOriginalSuccess"
                  :before-upload="beforeOriginalUpload">
                  <img v-if="form.original" :src="form.original" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </el-form-item>
            </el-col>

            <el-col :span="18">
              <el-form-item label="商品展示图" prop="characteristic">
                <GoodsImage />
              </el-form-item>
            </el-col>
          </el-row>
        </el-tab-pane>
      </el-tabs>
      <el-form label-width="100px">
        <el-form-item style="text-align: center;margin-left:-100px;margin-top:10px;">
          <el-button type="primary" @click="submitForm()" v-hasPermi="['goods:goods:sku:edit']">提交</el-button>
          <el-button @click="close()">返回</el-button>
        </el-form-item>
      </el-form>
    </el-form>
  </el-card>
</template>

<script>
import { goodsSkuDetail, addGoodsSku, updateGoodsSku } from "@/api/goods/goods";
import { treeselect } from "@/api/goods/category";
import { getToken } from "@/utils/auth";
import { Treeselect } from "@riophae/vue-treeselect";
import GoodsImage from "./goodsImage.vue";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";

export default {
  name: "GoodsSku",
  dicts: ['goods_market_enable'],
  components: { Treeselect, GoodsImage },
  data () {
    return {
      // 选中选项卡的 name
      activeName: "columnInfo",
      //上传图片地址
      uploadImgUrl: process.env.VUE_APP_BASE_API + "/oss/common/upload",
      headers: {
        Authorization: "Bearer " + getToken(),
      },
      skuId: undefined,
      // 表详细信息
      form: {
        id: undefined,
        goodsName: undefined,
        cost: 0,
        price: 0,
        minPrice: 0,
        point: 0,
        quantity: 0,
        weight: 0,
        volume: 0,
        extension: {
          gmp: undefined,
          approvalNo: undefined,
          expiryDate: undefined,
          standardCode: undefined,
          manufacturer: undefined
        },
        categoryPath: '',
        categoryName: [],
      },
      // 表单校验
      rules: {
        goodsName: [{ required: true, message: "商品名称不能为空", trigger: "blur" }],
        price: [{ required: true, message: "商品零售价不能为空", trigger: "blur" }],
        categoryPath: [{ required: true, message: "商品分类不能为空", trigger: "blur" }]
      },
      categoryList: [],
    };
  },
  created () {
    this.skuId = this.$route.params && this.$route.params.skuId;
    this.getCategoryTreeselect();
    this.getGoodsSkuDetail(this.skuId);
  },
  methods: {
    /** 查询商品分类下拉树结构 */
    getCategoryTreeselect () {
      treeselect().then(response => {
        this.categoryList = response.data;
      });
    },
    // select 选中
    changeCategoryPath (value) {
      this.categoryList.forEach(i => {
        i.children.forEach(j => {
          if (j.id === value.id) {
            this.form.categoryPath = i.originalId + ',' + j.originalId
            this.form.categoryName = [i.label, j.label]
          }
        })
      })
    },
    // 获取数据
    getGoodsSkuDetail (skuId) {
      goodsSkuDetail(0, skuId).then(response => {
        this.form = response.data
        if (!this.form.categoryName) {
          this.form.categoryName = ['', '请选择']
        }
        // if (!this.form.extension) {
        //   this.form.extension = {};
        // }
      }).catch(err => {
        console.log(err)
      })
    },
    /** 提交按钮 */
    submitForm () {
      this.$refs["form"].validate(valid => {
        if (valid) {
          const param = this.form;
          if (param.id == undefined) {
            this.$modal.confirm('确认新增商品吗？').then(function () {
              return addGoodsSku(0, param);
            }).then(() => {
              this.close();
            }).catch(function (e) {
              console.log(e)
              this.$modal.msgSuccess("新增商品失败！");
            });
          } else {
            this.$modal.confirm('确认修改商品吗？').then(function () {
              return updateGoodsSku(param.goodsId, param.id, param);
            }).then(() => {
              this.close();
            }).catch(function () {
              this.$modal.msgSuccess("新增商品失败！");
            });
          }
        } else {
          this.$modal.msgError("表单校验未通过，请重新检查提交内容");
        }
      });
    },
    /** 关闭按钮 */
    close () {
      const obj = { path: "/goods/goods", query: { t: Date.now(), pageNum: this.$route.query.pageNum } };
      this.$tab.closeOpenPage(obj);
    },
    handleOriginalSuccess (res, file) {
      this.form.original = res.data.url;
      this.$forceUpdate();
    },
    beforeOriginalUpload (file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
  },
  mounted () {

  }
};
</script>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 160px;
  height: 160px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
